<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>table</title>

</head>

<body>
<div>
    <ul class="nav nav-tabs">
        <li class="active"><a href="">用户信息</a></li>
        <li><a href="../user/list">用户列表</a></li>
        <li><a href="../loginLog/list">登录日志</a></li>
        <li><a href="../loginOut">注销</a></li>
    </ul>
</div>

<div style="margin: 30px 100px 80px 50px">
    <div style="padding: 10px 10px 10px 10px;text-align: right">
        <button id="js-export" type="button" class="btn btn-primary">导出Excel</button>
        <div class="btn-group">
            <!--按钮的代码-->
            <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
                <i>显示选项<span class="caret"></span></i>
            </button>
            <!--点击按钮会弹出下面的相应的下拉列表-->
            <ul class="dropdown-menu" role="menu" id="menueDiv">
                <li data-column="1">
                    <label><input data-column="1" type="checkbox" data-field="userId" value="1">用户ID</label>
                </li>
                <li data-column="2">
                    <label><input data-column="2" type="checkbox" data-field="username" value="2"
                                  checked="checked">用户名</label>
                </li>
                <li data-column="3">
                    <label><input data-column="3" type="checkbox" data-field="gender" value="3"
                                  checked="checked">性别</label>
                </li>
                <li data-column="4">
                    <label><input data-column="4" type="checkbox" data-field="year" value="4" checked="checked">
                        年龄</label>
                </li>
                <li data-column="5">
                    <label><input data-column="5" type="checkbox" data-field="areaName" value="5" checked="checked">
                        地区</label>
                </li>
                <li data-column="6">
                    <label><input data-column="6" type="checkbox" data-field="phone" value="6" checked="checked">
                        电话</label>
                </li>
                <li data-column="7">
                    <label><input data-column="7" type="checkbox" data-field="email" value="7" checked="checked">
                        邮箱</label>
                </li>
            </ul>
        </div>
    </div>
    <div>
        <table id="myTable" class="table table-striped table-bordered table-hover text-center display"
               style="width:100%">
            <thead>
            <tr>
                <th style="text-align: center">序列号</th>
                <th style="text-align: center">用户ID</th>
                <th style="text-align: center">用户名</th>
                <th style="text-align: center">性别</th>
                <th style="text-align: center">年龄</th>
                <th style="text-align: center">地区</th>
                <th style="text-align: center">电话</th>
                <th style="text-align: center">邮箱</th>
                <th style="text-align: center">操作</th>
            </tr>
            </thead>
            <tfoot>
            <tr>
                <th colspan="4" style="text-align:right">Total:</th>
                <th></th>
            </tr>
            </tfoot>
        </table>
    </div>
</div>
</div>

</body>
<script src="../../js/require.js"></script>
<script src="../../js/require.config.js"></script>
<script src="../../js/templates/table/table.js"></script>

</html>